<template>
  <div class="company">
    <div class="header">
      <div class="left"></div>
      <div class="right">我的公司管理</div>
    </div>

    <div class="content">
      <el-button class="add-role" @click="edit(1)">新增公司</el-button>

      <Table
        :tableData="tableData"
        :tableColumn="tableColumn"
        :tableCellWidth="tableCellWidth"
        :tableCellAlign="tableCellAlign"
        :tableShowTooltip="tableShowTooltip"
        :tableEdit="tableEdit"
        :tableShowPagination="tableShowPagination"
        :paginationObj="paginationObj"
        :tableIsShowSerial="false"
      ></Table>
    </div>
  </div>
</template>

<script>
import Table from "@/components/ability-components/table.vue";
export default {
  components: {
    Table,
  },
  data() {
    return {
      paginationObj: {
        page: 1,
        size: 10,
        total: 100,
      },
      tableShowPagination: true,
      tableEdit: {
        isShowEdit: true,
        align: "center",
        tableEditArr: [
          {
            icon: "",
            text: "查看",
            type: "text",
            cb: ({ row }) => {
              // 做逻辑处理
              console.log(row);
              this.$router.push('/home/companyDetail')
              // this.edit(2, row);
            },
          },
          {
            icon: "",
            text: "编辑",
            type: "text",
            cb: ({ row }) => {
              // 做逻辑处理
              console.log(row);
              this.$router.push('/home/companyEdit');
              // this.edit(2, row);
            },
          },
          {
            icon: "",
            text: "删除",
            type: "text",
            cb: ({ row }) => {
              // 做逻辑处理
              this.stop(row);
              console.log(row);
            },
          },
        ],
      },
      tableShowTooltip: [
        {
          prop: "name",
          showTooltip: false,
        },
        {
          prop: "status",
          showTooltip: false,
        },
      ],
      tableCellAlign: [
        {
          prop: "name",
          align: "center",
        },
        {
          prop: "status",
          align: "center",
        },
      ],
      tableCellWidth: [
        {
          prop: "name",
          // width: "200",
        },
        {
          prop: "status",
          // width: "200",
        },
      ],
      tableColumn: [
        {
          prop: "name",
          label: "角色",
        },
        {
          prop: "status",
          label: "审批状态",
        },
      ],
      tableData: [
        {
          Key: "公司1",
          ID: "F825480F-C76B-42BE-A63C-60D5DB06D471",
          name: "公司1",
          status: "待审批",
        },
        {
          Key: "公司2",
          ID: "972B99F5-680E-4FE9-9678-CA0BED6A162B",
          name: "公司2",
          status: "待审批",
        },
        {
          Key: "公司3",
          ID: "A00A24F2-CC9A-4E09-9018-CE48E44D1DF8",
          name: "公司3",
          status: "待审批",
        },
        {
          Key: "公司4",
          ID: "B620DECB-B3CF-4DC5-9776-C03718C2E4E6",
          name: "公司4",
          status: "待审批",
        },
        {
          Key: "公司5",
          ID: "A00A24F2-CC9A-4E09-9018-CE48E44D1DF9",
          name: "公司5",
          status: "待审批",
        },
      ],
    };
  },
  methods:{
    edit(){
       this.$router.push('/home/companyEdit');
    }
  }
};
</script>

<style lang="scss" scoped>
.company {
  width: 95%;
  margin: 0 auto;
  height: calc(100vh - 100px);
  // background-color: pink;
  .header {
    display: flex;
    .left {
      background-color: #442a8d;
      width: 5px;
      height: 20px;
      margin-right: 5px;
    }
    .right {
      font-weight: 650;
      color: #666666;
      font-size: 16px;
    }
  }

  .content {
    background-color: #ffffff;
    height: 95%;
    border-radius: 5px;
    // box-shadow: 0px 0px 1px rgba(0,0,0,0.1),0px 0px 3px rgba(0,0,0,0.1) inset;

    .add-role {
      margin: 20px 0;
      background-color: #442a8d;
      font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
      font-weight: 400;
      font-style: normal;
      color: #ffffff;
      width: 120px;
    }
  }
}
</style>
